<template>
    <div>
    <el-container>

        <el-header>个人中心</el-header>
        <el-main  class="mainClass">
            <div>
                <div style="width: 120px;float: left;text-align: center;margin: 15px 0 0 0">
                    <div style="  vertical-align:middle;margin:0px auto; height: 100px;width: 100px;overflow: hidden" >
                    <el-avatar shape="" class="img"  :src="emp.portraitSrc" v-loading="changeI"></el-avatar>
                    </div>
                 <span style="color: rgb(96,98,102)">
                       <el-upload
                               :multiple="false"
                               :show-file-list="false"
                               action="upload"
                               :on-success="upload_success"
                               list-type="picture">
                                <el-button size="small" style="margin-top: 5px" type="primary">编辑头像</el-button>
                        </el-upload>
                     <el-button size="small" style="margin-top: 5px" type="primary" @click="restore">恢复默认</el-button>
                   </span>
                </div>
            </div>
            <div style="clear: both;padding-top: 40px;font-size: 20px; color: rgb(96,98,102)">用户信息</div>
            <div class="box-card" >
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_style">员工姓名:</td>
                        <td>{{emp.empName}}</td></tr>
                    <tr>
                        <td class="td_style">部门:</td>
                        <td>{{emp.dept.departmentName}}</td></tr>
                    <tr>
                        <td>职位:</td>
                       <td>{{emp.pos.positionName}}</td></tr>
                    <tr>
                        <td class="td_content">密码:</td>
                        <td style="line-height: 40px">
                            *******
                            <el-button type="info"  style="clear:both;float: right"  icon="el-icon-edit"  @click="EditPsd">
                            修改密码
                            </el-button></td></tr>
                    <tr>
                        <td class="td_content">电话:</td>
                        <td>{{emp.empTel}}</td></tr>
                    <tr>
                        <td class="td_content" >薪水:</td>
                        <td >{{emp.empSalary}}</td></tr>
                    <tr>
                        <td class="td_content">入职日期:</td>
                        <td>{{emp.hireDate| formatDate}}</td></tr>
                </table>
            </div>
        </el-main>
    </el-container>
        <!--修改密码框-->
        <el-dialog
                title="修改密码"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-input placeholder="请输入新密码" v-model="psdOne" show-password ></el-input>
            <span class="mess" v-if="jut">密码长度为5~15个字符!</span>
            <el-input placeholder="请再次输入新密码" v-model="psdTwo" show-password class="inputClass"></el-input>
            <span class="mess" v-if="judge">两次密码不一致!</span>
            <span class="mess me" v-if="jud">请输入密码!</span>

            <span slot="footer" class="dialog-footer">
    <el-button @click="EditCancel">取 消</el-button>
    <el-button type="primary" @click="EditSure">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import {formatTimeToStr} from '@/assets/format.js'
   export default {
       name:"personalCenter",
        data(){
            return{

                imageUrl: '',
                SalaryVisible:false,
                dialogVisible:false,
                psdOne:'',
                psdTwo:'',
                newPsw:'',
                changeI:false,
                judge:false,
                jut:false,
                jud:false,
                emp:{
                    empId:0,
                    password:'',
                    empName:'',
                    empTel:'',
                    portraitSrc:'',
                    empSalary:0,
                    hireDate:'',
                    isOnJob:0,
                },
                dept:{
                    departmentId:0,
                    departmentName:'',
                },
                pos:{
                    positionId:0,
                    positionName:'',
                }
            }

        },
       created:function () {
            this.initData();
       },
       filters: {
           formatDate: function(time) {
               if(time!=null&&time!="")
               {
                   var date = new Date(time);
                   return formatTimeToStr(date, "yyyy-MM-dd ");
               }else{
                   return "";
               }
           }
       },
       methods:{
           /*恢复默认图片*/
           restore(){
               this.changeI=true;
               this.axios.post("api/restore-img",this.qs.stringify(this.$store.state.user))
                   .then(v=>{

                       this.initData();
                       this.changeI=false;
                   })
           },
          upload_success(response,file,flie_list){
               this.changeI=false;
              console.log(file.response);/*图片路径*/
              this.emp.portraitSrc=file.response;
              this.changeImg();
           },
           /*提交路径到后台*/
           changeImg(){
               this.axios.post("api/change-img",this.qs.stringify({ur:this.emp.portraitSrc,empId:this.$store.state.user.empId}))
                   .then(v=>{})
           },
            initData(){
                this.$axios.post("api/select-empById",this.qs.stringify(this.$store.state.user)).then(
v=>{
    this.emp=v.data;
    console.log(this.emp);
    console.log(this.emp.pos);
    console.log(this.emp.dept);
}
                ).catch()
            },
           /*开始修改密码*/
           EditPsd(){
        this.dialogVisible=true
           },
           /*确定修改密码*/
           EditSure(){
            console.log(this.psdOne);
            console.log(this.psdTwo);
            this.newPsw=this.psdOne;

            if ((this.psdOne!=this.psdTwo)||(this.psdOne=='')||(this.psdTwo=='')){
                this.judge=true;
            }else {
                this.judge=false;
                /*修改密码成功*/
                console.log(this.psdOne.length+"this.psdOne.size");
                if ((5<=this.psdOne.length)&&(this.psdOne.length<=15)){
                    this.jut=false;
                    this.axios.post("api/edit-pwd",this.qs.stringify({empId:this.emp.empId,psw:this.newPsw}))
                        .then(v=>{

                            this.dialogVisible=false;
                            this.global.mes_success("操作成功");
                            this.newPsw='';
                            this.psdOne='';
                            this.psdTwo='';
                            this.initData();
                        })
                }
                else {
                    this.jut=true;
                }

            }
           },
           EditCancel(){
               this.dialogVisible=false;
               this.judge=false;
               this.psdTwo='';
               this.psdOne='';
               this.judge=false;
           },
           handleClose(done) {
               this.$confirm('确认不保存并关闭？')
                   .then(_ => {
                       done();
                       this.judge=false;
                       this.psdTwo='';
                       this.psdOne='';

                   })
                   .catch(_ => {});
           },


       },

    }
</script>

<style scoped>
.item{
    border-bottom: #d9d9d9 1px solid;

}
    .box-card {
        width: 60%;
        background-color: rgb(233,238,243);
        margin-top: 20px;
        color: rgb(96,98,102);
    }
    .mainClass{
        margin-left: 100px;
    }
    td{
        width: 50%;
        padding-top: 10px ;
        height: 38px;
        padding-bottom:10px;
        border-bottom: #dcdfe6 1px solid;
    }
    .inputClass{
        margin-top: 50px;
    }
.mess{
    color: red;padding-left: 20px;

}
.me{

}

.img{
    width:100%;
    height:100%;
}
</style>